<template>
  <div>
    <!--卡片视图区-->
    <el-card>
      <!-- 步骤条-->
      <el-steps :space="1000" :active="activeIndex-0" finish-status="success" align-center>
        <el-step title="添加商品规格"></el-step>
        <el-step title="添加基本信息"></el-step>
        <el-step title="上架商品"></el-step>
      </el-steps>

      <!--表单-->
      <el-form ref="tableDataRef" :model="tableData" :rules="addTableDataRules" label-position="right"
               label-width="100px">
        <!--tabs-->
        <el-tabs v-model="activeIndex" :tab-position="'left'">

          <el-tab-pane label="添加商品规格" name="0">
            <!--<el-form-item :label="attributeName" prop="specs">-->
            <el-form-item label="规格：" prop="specs">
              <!--复选框-->
              <!--<el-checkbox-group v-for="item in skuInfos" :key="item.id" v-model="item.attributes[0].attributeValue">
                <el-checkbox :label="item.attributes[0].attributeValue" border></el-checkbox>
              </el-checkbox-group>-->
              <!--按钮样式-->
              <el-row>
                <el-col v-for="(item,index) in skuInfos" :key="index">
                  <el-button v-for="(v,i) in item.attributes" :key="i" v-model="attributeValue" plain>
                    {{v.attributeName}}:{{v.attributeValue}}
                  </el-button>
                </el-col>
              </el-row>
              <!-- <el-button v-for="item in skuInfos" :key="item.id" v-model="attributeValue" plain>
                 {{item.attributes[0].attributeValue}}
               </el-button>-->
              <!--<el-input placeholder="颜色|黑色,白色,黄色" v-model="tableData.specs"/>-->
            </el-form-item>
            <el-form-item label="规格名称" prop="specsName">
              <el-input placeholder="填写规格名称" v-model="tableData.specsName"/>
            </el-form-item>
            <el-button type="primary" @click="addSpec" round>下一步</el-button>
          </el-tab-pane>

          <el-tab-pane label="添加基本信息" name="1">
            <el-form-item label="1688商品ID" prop="offerId" hidden>
              <el-input v-model="tableData.offerId" disabled/>
            </el-form-item>
            <!--<el-form-item label="外部商品名称" prop='subject'>
              <el-input v-model="tableData.subject" disabled/>
            </el-form-item>-->
            <el-form-item label="商品名称" prop="goodsName">
              <el-input v-model="goodsName" placeholder="请输入商品名称"/>
            </el-form-item>

            <el-row>
              <el-col :span="6">
                <el-form-item label="划线价" prop="newMarketPrice">
                  <el-input v-model="tableData.newMarketPrice" clearable
                            placeholder="划线价保留小数点后两位"
                            type="number">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="抖店售价" prop="newDiscountPrice">
                  <el-input v-model="tableData.newDiscountPrice" clearable
                            placeholder="售价保留小数点后两位"
                            type="number">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="客服号码" prop="mobile">
                  <el-input v-model="tableData.mobile" placeholder="请输入客服号码" type="number"/>
                </el-form-item>
              </el-col>
              <el-col :span="3"></el-col>
              <el-col :span="6">
                <el-form-item label="重量" prop="weight">
                  <el-input v-model="tableData.weight" placeholder="商品重量 (单位:克)" type="number">
                    <template slot="append">克</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>


            <!--<el-form-item label="商品规格ID" prop="specId">
              <template>
                <el-select v-model="tableData.specId" placeholder="请选择">
                  <el-option
                    v-for="item in specIdOptions"
                    :key="item.specIdValue"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </template>
            </el-form-item>-->
            <!--<el-row>
              <el-col :span="12">
                <el-form-item label="客服号码" prop="mobile">
                  <el-input v-model="tableData.mobile" placeholder="请输入客服号码" type="number"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="重量" prop="weight">
                  <el-input v-model="tableData.weight" placeholder="商品重量 (单位:克)" type="number">
                    <template slot="append">克</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>-->

            <el-row>
              <el-col :span="8">
                <el-form-item label="品牌" prop="brandId">
                  <el-select v-model="tableData.brandId" :options="brandIdOptions" :disable-branch-nodes="true"
                             :show-count="true" placeholder="请选择品牌">
                    <el-option
                      v-for="item in brandIdOptions"
                      :key="item.brandIdValue"
                      :label="item.brand_chinese_name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="支付方式" prop="payType">
                  <el-select v-model="tableData.payType" :options="payTypeOptions" :disable-branch-nodes="true"
                             :show-count="true" placeholder="请选择支付方式">
                    <el-option
                      v-for="item in payTypeOptions"
                      :key="item.payTypeValue"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="承诺时间" prop="deliveryDelayDay">
                  <template>
                    <el-select v-model="tableData.deliveryDelayDay" placeholder="请输入承诺发货时间(单位/天)">
                      <el-option
                        v-for="item in deliveryDelayDayOptions"
                        :key="item.deliveryDelayDayValue"
                        :label="item.day"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="一级分类" prop="firstCid">
                  <template>
                    <el-select v-model="tableData.firstCid" placeholder="请选择">
                      <el-option
                        v-for="item in firstOptions"
                        :key="item.firstValue"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="二级分类" prop="secondCid">
                  <template>
                    <el-select v-model="tableData.secondCid" placeholder="请选择"
                               @focus="getSecondCascader(tableData.firstCid)">
                      <el-option
                        v-for="item in secondOptions"
                        :key="item.secondValue"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="三级分类" prop="thirdCid">
                  <template>
                    <el-select v-model="tableData.thirdCid" placeholder="请选择"
                               @focus="getThirdCascader(tableData.secondCid)">
                      <el-option
                        v-for="item in thirdOptions"
                        :key="item.thirdValue"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label-width="130px" label="属性名称|属性值" prop="productFormat">
              <el-input v-model="tableData.productFormat" placeholder="请输入属性名称|属性值
之间用|分隔, 多组之间用^分开    案例：货号|8888^上市年份季节|2018年秋季"/>
            </el-form-item>
            <el-form-item label="商品描述" prop="descriptionStr" hidden>
              <el-input v-model="tableData.descriptionStr" placeholder="商品描述"/>
            </el-form-item>
            <el-collapse>
              <el-collapse-item title="商品描述" name="6">
                <el-image v-for="descriptionUrl in descriptionList" :key="descriptionUrl" :src="descriptionUrl"></el-image>
              </el-collapse-item>
            </el-collapse>
            <el-form-item label="轮播图" prop="picStr" hidden>
              <el-input v-model="tableData.picStr" placeholder="轮播图"/>
            </el-form-item>

            <el-collapse>
              <el-collapse-item title="轮播图" name="3">
                <el-image v-for="picUrl in picList" :key="picUrl" :src="picUrl"></el-image>
              </el-collapse-item>
            </el-collapse>
            <el-button type="primary" @click="goods" round>下一步</el-button>
          </el-tab-pane>

          <el-tab-pane label="上架商品" name="2">
            <!--添加对应商品价格-->
            <!--<el-row prop="specDetailIds"
                    v-for="(specDetailItem,index) in specDetailList"
                    :key="specDetailItem.id">
              <el-col v-for="(skuInfosItem,index) in skuInfos" :key="index">
                {{specDetailItem.name}}: {{skuInfosItem.consignPrice}}
              </el-col>
            </el-row>-->
            <!-- <el-button type="primary" @click="add">添加商品售价库存</el-button>-->
            <el-row>
              <el-col>
                <span style="font-weight:900">商品规格详情</span>
              </el-col>
              <el-col>
                <span> 商品规格：<el-tag size="mini"></el-tag></span>
                <span>商品价格：<el-tag size="mini" type="danger"></el-tag></span>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <!--必须要求一致-->
            <el-row v-for="(specDetailItem,index) in skuInfos"
                    :key="specDetailItem.id">
              <el-col :span="9">
                <el-row>
                  <el-col>
                <span v-for="(v,i) in specDetailItem.attributes"
                      :key="v.id">
                  <el-tag>{{v.attributeValue}}</el-tag>
                </span>
                    <span>
                   <el-tag type="danger"> {{specDetailItem.consignPrice}}元</el-tag>
                </span>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="15">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="库存:">
                      <el-input prop="num" placeholder="请输入库存" v-model="specDetailItem.num">
                        <template slot="append">个</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="1">
                    <el-button type="success" icon="el-icon-check" circle plain
                               :loading="specDetailItem.num === undefined?true:false"
                               :disabled="specDetailItem.num === undefined?true:false"
                               @click="num(specDetailItem.num)"></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="售价:" prop="upPrice">
                      <el-input prop="upConsignPrice"
                                placeholder="请输入售价" v-model="specDetailItem.upConsignPrice">
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="1">
                    <el-button type="success" icon="el-icon-check" circle plain
                               :loading="specDetailItem.upConsignPrice === undefined?true:false"
                               @click="price(specDetailItem.upConsignPrice)"></el-button>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-button type="primary" @click="up">上架</el-button>
            <el-button type="primary" @click="clean">清空</el-button>
            <!-- <el-col>
               <el-row v-for="(specDetailItem,index) in skuInfos"
                       :key="specDetailItem.id" :span="24">
                 <el-col>
                 <span v-for="(v,i) in specDetailItem.attributes"
                       :key="v.id">
                   <el-tag>{{v.attributeValue}}</el-tag>
                 </span>
                   <span>
                    <el-tag type="danger"> {{specDetailItem.consignPrice}}元</el-tag>
                 </span>
                 </el-col>
               </el-row>
               <el-row>
                 <el-col :span="22">
                   <el-input prop="num" placeholder="库存" v-model="specDetailItem.num">
                     <template slot="append">个</template>
                   </el-input>
                 </el-col>
                 <el-col :span="2">
                   <el-button type="success" icon="el-icon-check" circle plain
                              @click="num(specDetailItem.num)"></el-button>
                 </el-col>
                 <el-col :span="22">
                   <el-form-item prop="upPrice">
                     <el-input
                       placeholder="请输入售价" v-model="specDetailItem.upConsignPrice">
                       <template slot="append">元</template>
                     </el-input>
                   </el-form-item>
                 </el-col>
                 <el-col :span="2">
                   <el-button type="success" icon="el-icon-check" circle plain
                              @click="price(specDetailItem.upConsignPrice)"></el-button>
                 </el-col>
               </el-row>
               <el-button type="primary" @click="up">上架</el-button>
             </el-col>-->
            <!--<el-col :span="12">
              <el-row v-for="(specDetailItem,index) in sarrName"
                      :key="index">
                <el-row>
                  <el-col>
                    {{specDetailItem}}
                  </el-col>
                </el-row>
                <el-col :span="22">
                  <el-input prop="num" placeholder="库存" v-model="specDetailItem.num">
                    <template slot="append">个</template>
                  </el-input>
                </el-col>
                <el-col :span="2">
                  <el-button type="success" icon="el-icon-check" circle @click="num(specDetailItem.num)"></el-button>
                </el-col>
                <el-col :span="22">
                  <el-form-item prop="upPrice">
                    <el-input
                      placeholder="售价保留小数点后两位" v-model="specDetailItem.price">
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button type="success" icon="el-icon-check" circle
                             @click="price(specDetailItem.price)"></el-button>
                </el-col>
              </el-row>
            </el-col>-->
            <el-form-item label="1688商品ID" prop="productId" hidden>
              <el-input placeholder="请填写商品id" v-model="tableData.offerId" disabled/>
            </el-form-item>
            <el-form-item label="1688skuID" prop="outSkuId" hidden>
              <el-input placeholder="填写skuId" v-model="tableData.outSkuId"/>
            </el-form-item>

            <!--  <el-form-item label="库存" prop="stockNum" type="number">
                <el-input placeholder="库存" v-model="tableData.stockNum">
                  <template slot="append">个</template>
                </el-input>
              </el-form-item>
              <el-form-item label="售价" prop="price" type="number">
                <el-input placeholder="售价" v-model="tableData.price">
                  <template slot="append">分</template>
                </el-input>
              </el-form-item>-->
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script src="lodash.js"></script>
<script>
  import ElCollapseTransition from "element-ui/src/transitions/collapse-transition";
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";
  import _ from 'lodash';
  export default{
    components: {
      ElCol,
      ElRow,
      ElCollapseTransition
    },
    data(){
      return {
        payTypeValue: '',
        brandIdValue: '',
        firstValue: '',
        secondValue: '',
        thirdValue: '',
        specDetailIdsValue: '',
        deliveryDelayDayValue: '',
        goodsName: '',
        goodsId: '',
        activeIndex: '0',
        attributeName: '',
        attributeValue: '',
        specsId: '',
        skuInfos: [],
        specDetailList: [],
        descriptionList: [],
        attributeNameList: [],
        attributeValueList: [],
        specDetailIdList: [],
        picList: [],
        sarrName: [],
        tableData: {},
        firstOptions: [{
          id: '',
          name: ''
        }],
        secondOptions: [{
          id: '',
          name: ''
        }],
        thirdOptions: [{
          id: '',
          name: ''
        }],
        specIdOptions: [{
          id: '',
          name: ''
        }],
        brandIdOptions: [{
          id: '',
          brand_chinese_name: ''
        }],
        specDetailIdsOptions: [{
          id: '',
          name: ''
        }],
        deliveryDelayDayOptions: [{
          id: '3',
          name: '3'
        },
          {
            id: '5',
            name: '5'
          },
          {
            id: '7',
            name: '7'
          },
          {
            id: '10',
            name: '10'
          },
          {
            id: '15',
            name: '15'
          }],
        payTypeOptions: [{
          value: '0',
          label: '货到付款'
        },
          {
            value: '1',
            label: '在线支付'
          },
          {
            value: '2',
            label: '二者都支持'
          }],
        addTableDataRules: {
          /*   goodsName: [
           {required: true, message: '请输入商品名称', trigger: 'blur'}
           ],*/
          newMarketPrice: [
            {required: true, message: '请输入划线价', trigger: 'blur'},
            {
              pattern: /(^(([1-9]{1}\d*)|(0{1}))(\.\d{2})$)/,
              message: '请输入正确额格式,保留两位小数'
            }
          ],
          newDiscountPrice: [
            {required: true, message: '请输入规格抖店售价', trigger: 'blur'},
            {
              pattern: /(^(([1-9]{1}\d*)|(0{1}))(\.\d{2})$)/,
              message: '请输入正确额格式,保留两位小数'
            }
          ],
          mobile: [
            {required: true, message: '请输客服号码', trigger: 'blur'}
          ],
          weight: [
            {required: true, message: '请输入重量', trigger: 'blur'}
          ],
          brandId: [
            {required: true, message: '请选择品牌', trigger: 'blur'}
          ],
          payType: [
            {required: true, message: '请选择支付方式', trigger: 'blur'}
          ],
          deliveryDelayDay: [
            {required: true, message: '请选择发货时间', trigger: 'blur'}
          ],
          firstCid: [
            {required: true, message: '请选择一级分类', trigger: 'blur'}
          ],
          secondCid: [
            {required: true, message: '请选择二级分类', trigger: 'blur'}
          ],
          thirdCid: [
            {required: true, message: '请选择三级分类', trigger: 'blur'}
          ],
          productFormat: [
            {required: true, message: '请输入属性名称|属性值', trigger: 'blur'}
          ]
        },
//        specDetailItem: {num: [], price: []},
        specDetailItem: {
          num: '',
          upConsignPrice: ''
        },
        stockNum: '',
        priceNum: '',
        isDisabled: ''
      }
    },
    created(){
      this.getRouterData();
      this.getGoodsInfoById();
      this.getBrandList();
      this.getFirstCascader();
      this.getSpec();
    },
    methods: {
      addSpec(){
        this.tableData.name = this.tableData.specsName
        this.$http.post(`/douyin/product/addSpec`, this.tableData)
          .then((response) => {
            console.log(response.data)
            var result = response.data;
            if (result.code === 200) {
              this.tableData.specId = JSON.parse(result.message).data.id
              console.log('规格id', this.tableData.specId)
              this.activeIndex = '1';
            }
          })
        /*this.$refs.tableDataRef.validate(valid=>{
         })*/

      },
      getRouterData() {
        this.goodsId = this.$route.query.id
      },

      getGoodsInfoById(){
        var specInfo = []
        this.$http
          .get(`/douyin/goods/lib/getGoodsInfoById/${this.goodsId}`)
          .then((response) => {
            var result = response.data;
            if (result.code === 200) {
              this.tableData = result.dataMap.data
              console.log('tableData', this.tableData);
              this.descriptionList = JSON.parse(this.tableData.description)
              this.picList = JSON.parse(result.dataMap.data.image).images
              this.skuInfos = JSON.parse(this.tableData.skuInfos)
              console.log('skuInfos', this.skuInfos);

              var skuInfosList = JSON.parse(this.tableData.skuInfos)
              console.log('规格列表', skuInfosList)
              skuInfosList[0].attributes.forEach((item, index) => {
                let result = {}
                result[item.attributeName] = [];
                specInfo.push(result)
              })

              this.skuInfos.forEach((item1, index1) => {
                item1.attributes.forEach((item2, index2) => {
                  var name = item2.attributeName;
                  specInfo[index2][name].push(item2.attributeValue);
                });
              });
              console.log('specInfo', specInfo)
              var arr = []
              specInfo.forEach((item, index) => {
                var key = Object.keys(specInfo[index])
                console.log('key', key)
                var keyList = item[key]
                var res = this.unique(keyList)
                console.log('res', res)
                var str = key + '|' + res
                console.log('str', str)
                arr.push(str)
              })
              console.log('arr', arr)
              var arrStr = ''
              arr.forEach((item, index) => {
                arrStr += item + '^'
              })
              if (arrStr.length > 0) {
                arrStr = arrStr.substr(0, arrStr.length - 1);
                this.tableData.specs = arrStr
              }
              console.log('arrStr', arrStr)


              var subject = result.dataMap.data.subject
              var description = result.dataMap.data.description
              var pic = JSON.stringify(JSON.parse(result.dataMap.data.image).images)
              this.tableData.subject = subject.replace(/\"/g, "")

              this.goodsName = subject.replace(/\"/g, "")
              this.tableData.descriptionStr = description.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "").replace(/,/g, "|")
              this.tableData.picStr = pic.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "").replace(/,/g, "|")
            }
          })
      },

      /** 获取商品规格ID列表*/
      getSpec() {
        this.$http.get(`/douyin/product/getSpec`)
          .then((response) => {
            console.log('获取品牌', response)
            var result = response.data.message;
            this.specIdOptions = JSON.parse(result).data
          })
      },

      /** 获取品牌*/
      async getBrandList(){
        await this.$http.get(`/douyin/oauth/getBrandList`)
          .then((response) => {
            console.log('获取品牌', response)
            var result = response.data.message;
            this.brandIdOptions = JSON.parse(result).data
            console.log(this.brandIdOptions)
          })
      },
      /** 一级分类*/
      async getFirstCascader(){
        await this.$http
          .get(`/douyin/product/getGoodsCategory/0`)
          .then((response) => {
            console.log(response)
            var result = response.data.message;
            this.firstOptions = JSON.parse(result).data
            console.log(this.firstOptions)
          })
      },
      /** 二级分类*/
      async getSecondCascader(val){
        console.log(val)
        await this.$http
          .get(`/douyin/product/getGoodsCategory/${val}`)
          .then((response) => {
            console.log(response)
            var result = response.data.message;
            this.secondOptions = JSON.parse(result).data
            console.log(this.secondOptions)
          })
      },
      /** 三级分类*/
      async getThirdCascader(val){
        console.log(val)
        await this.$http
          .get(`/douyin/product/getGoodsCategory/${val}`)
          .then((response) => {
            console.log(response)
            var result = response.data.message;
            this.thirdOptions = JSON.parse(result).data
            console.log(this.thirdOptions)
          })
      },
      async getSpecDetail(){
        await this.$http
          .post(`/douyin/product/getSpecDetail/${this.tableData.specId}`)
          .then((response) => {
            var result = response.data.message
            var resultData = JSON.parse(result).data
            this.specDetailIdList = resultData;
            console.log('this.specDetailIdList', this.specDetailIdList)
            this.specDetailList = resultData.Specs;
          })
      },

      goods(){
        this.$refs.tableDataRef.validate(valid => {
          if (!valid) {
            this.$message.error('请安要求填写数据')
            this.activeIndex = '1'
          } else {
            this.addGoods();
            console.log(this.tableData.newMarketPrice)
          }
        })
      },

      async addGoods(){
        var _ids = []
        var imageUrl = []
        var info = ''
        this.skuInfos.forEach((item1, index1) => {
//          console.log('1', item1.attributes[0].skuImageUrl)
          if (item1.attributes[0].skuImageUrl === undefined) {
            item1.attributes[0].skuImageUrl = "http://we9.91gongju.cn/" + index1
          }
          imageUrl.push(item1.attributes[0].skuImageUrl)
        });
        /** 图片去重*/
        var img = this.unique(imageUrl)
        await this.$http
          .post(`/douyin/product/getSpecDetail/${this.tableData.specId}`)
          .then((response) => {
            var result = response.data.message
            var resultData = JSON.parse(result).data
            this.specDetailIdList = resultData;
            this.specDetailList = resultData.Specs;
            this.specDetailList.forEach((item, index) => {
              console.log('子规格', item)
              let result = []
              _ids.push(result)
            })
            this.specDetailList.forEach((item1, index1) => {
              item1.values.forEach((item2, index2) => {
                (_ids[index1]).push(item2.id);
              });
            });
            _ids.forEach((item, index) => {
              console.log('item', item)
              item.forEach((item1, index1) => {
                info += JSON.stringify(item1 + '|' + img[index1]).replace(/\"/g, "") + '^'
              })
            })
            if (info.length > 0) {
              info = info.substr(0, info.length - 1);
              this.tableData.specPic = info
            }
          })
        this.tableData.marketPrice = (this.tableData.newMarketPrice).replace(/\./g, "")
        this.tableData.discountPrice = (this.tableData.newDiscountPrice).replace(/\./g, "")
        console.log('specId', this.tableData.specId)
        this.tableData.name = this.goodsName
        await this.$http
          .post(`/douyin/product/addProduct`, this.tableData)
          .then((response) => {
            var result = response.data.message;
            console.log(result)
            if (JSON.parse(result).message === "success") {
              this.getSpecDetail();
              this.activeIndex = '2';
            } else {
              this.$message({
                message: JSON.parse(result).message,
                type: 'error'
              });
              this.activeIndex = '1';
            }
          })
      },

      /*  change: function (e, index) {
       this.specDetailItem.num = e.target.value
       console.log(e.target.value);//实时获取输入值
       console.log(index);//获取点击输入框的索引
       },*/

      /*add(){
       var specDetailIds = ''
       /!*   console.log('specDetailIdList', this.specDetailList)
       this.stockNum = this.stockNum.substr(9).substring(0, this.stockNum.length - 1)
       this.tableData.stockNum = this.stockNum.substring(0, this.stockNum.length - 1)
       console.log(this.tableData.stockNum)

       this.priceNum = this.priceNum.substr(9).substring(0, this.priceNum.length - 1)
       this.tableData.price = this.priceNum.substring(0, this.priceNum.length - 1)
       console.log('specDetailList', this.specDetailList.length)*!/


       var specDetailListId = []
       this.specDetailList.forEach((item, index) => {
       console.log('子规格', item)
       let result = []
       specDetailListId.push(result)
       })

       this.specDetailList.forEach((item1, index1) => {
       item1.values.forEach((item2, index2) => {
       (specDetailListId[index1]).push(item2.id);
       });
       });
       console.log('specDetailListId', specDetailListId)
       var sarrId = [[]];
       for (var i = 0; i < specDetailListId.length; i++) {
       var tarrId = [];
       for (var j = 0; j < sarrId.length; j++)
       for (var k = 0; k < specDetailListId[i].length; k++)
       tarrId.push(sarrId[j].concat(specDetailListId[i][k]));
       sarrId = tarrId;
       }
       console.log('sarrId', sarrId)

       var srrStr = ''
       sarrId.forEach((item, index) => {
       item.forEach((v, i) => {
       console.log('length', item.length)
       console.log('i', i)
       if (item.length == (i + 1)) {
       srrStr += v + '^'
       } else {
       srrStr += v + '|'
       }
       })
       })
       if (srrStr.length > 0) {
       srrStr = srrStr.substr(0, srrStr.length - 1);
       this.tableData.specDetailIds = srrStr
       console.log('srrStr', this.tableData.specDetailIds)
       }

       /!* var specDetailId = ''
       this.specDetailIdList.forEach((item, index) => {
       specDetailId += JSON.stringify(item.id) + '|'
       })
       if (specDetailId.length > 0) {
       specDetailId = specDetailId.substr(0, specDetailId.length - 1);
       this.tableData.specId = specDetailId
       console.log('specIds', this.tableData.specId)
       }*!/
       this.tableData.specId = this.specDetailIdList.id

       var specIdStr = ''
       for (let i = 0; i < sarrId.length; i++) {
       specIdStr += this.tableData.specId + '|'
       }
       if (specIdStr.length > 0) {
       specIdStr = specIdStr.substr(0, specIdStr.length - 1);
       this.tableData.specId = specIdStr
       console.log('specIds', this.tableData.specId)
       }

       var specDetailListName = []
       this.specDetailList.forEach((item, index) => {
       console.log('子规格', item)
       let result = []
       specDetailListName.push(result)
       })

       this.specDetailList.forEach((item1, index1) => {
       item1.values.forEach((item2, index2) => {
       (specDetailListName[index1]).push(item2.name);
       });
       });
       var sarrName = [[]];
       for (var i = 0; i < specDetailListName.length; i++) {
       var tarrName = [];
       for (var j = 0; j < sarrName.length; j++)
       for (var k = 0; k < specDetailListName[i].length; k++)
       tarrName.push(sarrName[j].concat(specDetailListName[i][k]));
       sarrName = tarrName;
       this.sarrName = sarrName
       }
       console.log('sarrName', this.sarrName)

       var skuIdStr = ''
       this.skuInfos.forEach((item, index) => {
       skuIdStr += item.skuId + '|'
       })
       if (skuIdStr.length > 0) {
       skuIdStr = skuIdStr.substr(0, skuIdStr.length - 1);
       this.tableData.outSkuId = skuIdStr
       console.log('outSkuId', this.tableData.outSkuId)
       }

       },*/
      num(val){
        this.stockNum += val + '|'
//        this.stockNum = this.numStr
        console.log('this.stockNum', this.stockNum)
      },
      price(val){
        /*var pr = val.replace(/\./g, "")
         this.priceStr += pr + '|'*/
        /* this.priceStr += val + '|'
         this.priceNum = this.priceStr
         console.log('this.priceNum', this.priceNum)*/
        var result = this.toDecimal2(val)
        var pr = result.replace(/\./g, "")
        this.priceNum += pr + '|'
        console.log('this.priceNum', this.priceNum)
      },
      clean(){
        this.stockNum = ''
        this.priceNum = ''
        this.skuInfos = {}
        this.skuInfos = JSON.parse(this.tableData.skuInfos)
      },
      toDecimal2(x) {
        var f = parseFloat(x);
        if (isNaN(f)) {
          return false;
        }
        var f = Math.round(x * 100) / 100;
        var s = f.toString();
        var rs = s.indexOf('.');
        if (rs < 0) {
          rs = s.length;
          s += '.';
        }
        while (s.length <= rs + 2) {
          s += '0';
        }
        return s;
      },

      async up(){
        this.tableData.stockNum = this.stockNum.substring(0, this.stockNum.length - 1)
        console.log(this.tableData.stockNum)

        this.tableData.price = this.priceNum.substring(0, this.priceNum.length - 1)

        var specDetailListId = []
        this.specDetailList.forEach((item, index) => {
          console.log('子规格', item)
          let result = []
          specDetailListId.push(result)
        })

        this.specDetailList.forEach((item1, index1) => {
          item1.values.forEach((item2, index2) => {
            (specDetailListId[index1]).push(item2.id);
          });
        });
        console.log('specDetailListId', specDetailListId)
        var sarrId = [[]];
        for (var i = 0; i < specDetailListId.length; i++) {
          var tarrId = [];
          for (var j = 0; j < sarrId.length; j++)
            for (var k = 0; k < specDetailListId[i].length; k++)
              tarrId.push(sarrId[j].concat(specDetailListId[i][k]));
          sarrId = tarrId;
        }
        console.log('sarrId', sarrId)

        var srrStr = ''
        sarrId.forEach((item, index) => {
          item.forEach((v, i) => {
            console.log('length', item.length)
            console.log('i', i)
            if (item.length == (i + 1)) {
              srrStr += v + '^'
            } else {
              srrStr += v + '|'
            }
          })
        })
        if (srrStr.length > 0) {
          srrStr = srrStr.substr(0, srrStr.length - 1);
          this.tableData.specDetailIds = srrStr
          console.log('srrStr', this.tableData.specDetailIds)
        }

        /* var specDetailId = ''
         this.specDetailIdList.forEach((item, index) => {
         specDetailId += JSON.stringify(item.id) + '|'
         })
         if (specDetailId.length > 0) {
         specDetailId = specDetailId.substr(0, specDetailId.length - 1);
         this.tableData.specId = specDetailId
         console.log('specIds', this.tableData.specId)
         }*/
        this.tableData.specId = this.specDetailIdList.id

        var specIdStr = ''
        for (let i = 0; i < sarrId.length; i++) {
          specIdStr += this.tableData.specId + '|'
        }
        if (specIdStr.length > 0) {
          specIdStr = specIdStr.substr(0, specIdStr.length - 1);
          this.tableData.specId = specIdStr
          console.log('specIds', this.tableData.specId)
        }

        var specDetailListName = []
        this.specDetailList.forEach((item, index) => {
          console.log('子规格', item)
          let result = []
          specDetailListName.push(result)
        })

        this.specDetailList.forEach((item1, index1) => {
          item1.values.forEach((item2, index2) => {
            (specDetailListName[index1]).push(item2.name);
          });
        });
        var sarrName = [[]];
        for (var i = 0; i < specDetailListName.length; i++) {
          var tarrName = [];
          for (var j = 0; j < sarrName.length; j++)
            for (var k = 0; k < specDetailListName[i].length; k++)
              tarrName.push(sarrName[j].concat(specDetailListName[i][k]));
          sarrName = tarrName;
          this.sarrName = sarrName
        }
        console.log('sarrName', this.sarrName)

        var skuIdStr = ''
        this.skuInfos.forEach((item, index) => {
          skuIdStr += item.skuId + '|'
        })
        if (skuIdStr.length > 0) {
          skuIdStr = skuIdStr.substr(0, skuIdStr.length - 1);
          this.tableData.outSkuId = skuIdStr
          console.log('outSkuId', this.tableData.outSkuId)
        }

        await this.$http
          .post(`/douyin/product/addGoodsSkuAll`, this.tableData)
          .then((response) => {
            console.log('response', response)
            var result = response.data
            var msg = JSON.parse(result.message)
            console.log(msg)
            if (msg.err_no === 4) {
              this.$message.error(msg.message)
            } else {
              this.$message.success('上架成功')
              this.$router.push(`/zj/goods/list`)
            }
          })
      },
      unique(arr) {
        if (!Array.isArray(arr)) {
          console.log('type error!')
          return
        }
        let res = [arr[0]]
        for (let i = 1; i < arr.length; i++) {
          let flag = true
          for (let j = 0; j < res.length; j++) {
            if (arr[i] === res[j]) {
              flag = false;
              break
            }
          }
          if (flag) {
            res.push(arr[i])
          }
        }
        return res
      }
    }
  }
</script>

<style>
  .specDetailIdInput {

  }
</style>
